import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './ChartBox.module.css';
import Helper from '../../../../components/Helper';
import { Link } from 'react-router-dom';
import ECharts from '@kuiper-components/echarts';

export default function ChartBox({ className, jobInfo, type }) {
	const hostNum = jobInfo.host || 0;
	const ristHostNum = jobInfo.risk_host_jobs || 0;
	const webNum = jobInfo.web || 0;
	const riskWebNum = jobInfo.risk_web_jobs || 0;
	const option = {
		grid: {
			top: 0,
			right: 0,
			bottom: 0,
			left: 0,
		},
		series: {
			type: 'pie',
			radius: ['80%', '100%'],
			center: ['50%', '50%'],
			label: {
				normal: {
					show: false,
					position: 'outside',
				},
				emphasis: {
					show: false,
					textStyle: {
						fontSize: '20',
						fontWeight: 'normal',
					},
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
				emphasis: {
					show: false,
				},
			},
		},
	};
	if (!type) {
		option.series.data = [];
		riskWebNum &&
			option.series.data.push({
				name: '风险Web资产数',
				value: riskWebNum,
				itemStyle: { color: '#FAAF2C' },
			});
		option.series.data.push({
			name: '接入Web资产数',
			value: webNum - riskWebNum,
			itemStyle: { color: '#E7EAEF' },
		});
	} else {
		option.series.data = [];
		ristHostNum &&
			option.series.data.push({
				name: '风险主机资产数',
				value: ristHostNum,
				itemStyle: { color: '#FAAF2C' },
			});
		option.series.data.push({
			name: '接入主机资产数',
			value: hostNum - ristHostNum,
			itemStyle: { color: '#E7EAEF' },
		});
	}
	return (
		<div className={cn(className, s.chartBox)}>
			<div
				style={{ width: '80px', height: '80px', pointerEvents: 'none' }}
				className={cn(s.pr)}
			>
				{type ? (
					<>
						<span className={cn(s.pa, s.echartsLabel)}>
							<span>{ristHostNum}</span>/{hostNum}
						</span>
						<ECharts option={option} />
					</>
				) : (
					<>
						<span className={cn(s.pa, s.echartsLabel)}>
							<span>{riskWebNum}</span>/{webNum}
						</span>
						<ECharts option={option} />
					</>
				)}
			</div>
			<div className={s.tipBox}>
				{type ? (
					<Link to="/asset-manage/manage/host">
						<div className={s.tipBox1}>
							<p className={s.tipBoxNum}>{ristHostNum}</p>
							<div>
								<span className={s.tipBoxT}>风险主机资产数</span>
							</div>
						</div>
						<div className={cn(s.tipBox1, s.tipBox2)}>
							<p className={s.tipBoxNum}>{hostNum}</p>
							<div>
								<span className={cn(s.tipBoxT, s.all)}>接入主机资产数</span>
							</div>
						</div>
					</Link>
				) : (
					<Link to="/asset-manage/manage/web">
						<div className={s.tipBox1}>
							<p className={s.tipBoxNum}>{riskWebNum}</p>
							<div>
								<span className={s.tipBoxT}>风险Web资产数</span>
							</div>
						</div>
						<div className={cn(s.tipBox1, s.tipBox2)}>
							<p className={s.tipBoxNum}>{webNum}</p>
							<div>
								<span className={cn(s.tipBoxT, s.all)}>接入Web资产数</span>
							</div>
						</div>
					</Link>
				)}
			</div>
		</div>
	);
}

ChartBox.propTypes = {
	className: PropTypes.string,
	jobInfo: PropTypes.any,
	type: PropTypes.any,
};

ChartBox.defaultProps = {
	className: s.chartBox,
};
